import type { DeckInfoCardItem, DeckInfoItem } from '/@/api/currentDeck/model/deckModel';
import { computed, defineComponent, ref, unref, VNode } from 'vue';
import { useVModels } from '@vueuse/core';
import { useCurrentDeckStore } from '/@/store/modules/currentDeck';
import setting from '/@/settings/projectSetting';
import { Button, ConfigProvider, Popup, Empty, Icon as VIcon } from 'vant';
import { Icon } from '/@/components/Icon';

import('./ChooseCardPopup.less');

export default defineComponent({
  name: 'ChooseCardPopup',
  props: {
    show: {
      type: Boolean as PropType<boolean>,
      required: true,
      default: () => {
        return false;
      },
    },
    deckCardList: {
      type: Array as PropType<DeckInfoItem[]>,
      required: true,
    },
  },
  emits: ['update:show', 'addCard', 'delCard'],
  setup(props, { emit }) {
    const { show } = useVModels(props, emit);

    const currentStore = useCurrentDeckStore();

    const allCards = computed(() => {
      const { deckCardList } = props;
      const allArray: DeckInfoCardItem[] = [];
      for (const item of deckCardList) {
        allArray.push(...item.card_list);
      }
      return allArray;
    });
    const cardSum = computed(() => {
      let num = 0;
      unref(allCards).map((item) => {
        num += item.number!;
      });
      return num;
    });

    const GetCardArea = () => {
      const selectCards = unref(allCards);

      const listArr: VueNode[] = [];

      const CardAction = ({ card }: { card: DeckInfoCardItem }) => {
        return (
          <ConfigProvider
            themeVars={{ buttonBorderWidth: 0 }}
            class={'card-action-buttons flex justify-between absolute bg-white'}
          >
            <Button
              plain
              icon={'minus'}
              size={'small'}
              type='primary'
              round
              disabled={!card.number}
              onClick={() => {
                emit('delCard', card);
              }}
            />
            <span class={`card-nums ${card.number ? '' : 'hidden'}`}>x{card.number}</span>
            <Button
              plain
              icon={'plus'}
              size={'small'}
              type='primary'
              round
              onClick={() => {
                emit('addCard', card);
              }}
            />
          </ConfigProvider>
        );
      };

      selectCards.map((item) => {
        listArr.push(
          <li class={'card-item relative'}>
            <div class='image'>
              <img src={item.img} alt='' onClick={() => {}} />
            </div>
            <div class={'name-box'}>
              <div class={'name-content van-ellipsis text-xs text-white px-md'}>{item.name}</div>
            </div>
            <CardAction card={item} />
          </li>
        );
      });

      if (!listArr.length) {
        return <Empty description={'未选择卡牌'}></Empty>;
      }
      return <ul class='choose-card-list flex flex-wrap'>{listArr}</ul>;
    };

    const imageShow = ref(true);

    const CardActionText = ({ card }: { card: DeckInfoCardItem }) => {
      return (
        <ConfigProvider class={'card-action-buttons flex justify-between items-center absolute bg-white'}>
          <div
            class={'text-xs border-1 border-blue-500 w-36px h-36px rounded-full text-blue-500 text-center leading-34px'}
            onClick={() => {
              emit('delCard', card);
            }}
          >
            <VIcon name={'minus'} />
          </div>
          <span class={`card-nums ${card.number ? '' : 'hidden'}`}>{card.number}</span>
          <div
            class={'text-xs border-1 border-blue-500 w-36px h-36px rounded-full text-blue-500 text-center leading-34px'}
            onClick={() => {
              emit('addCard', card);
            }}
          >
            <VIcon name={'plus'} />
          </div>
        </ConfigProvider>
      );
    };
    const CardItemsText = ({ cardList }: { cardList: DeckInfoCardItem[] }) => {
      return (
        <ul class={'sel-card-text-area'}>
          {cardList.map((item) => {
            return (
              <li class={'sel-card-item flex items-center'}>
                {currentStore.getDeckConfig.has_series ? <div class={'series'}>{item.series_abbr}</div> : null}
                <div class={'name van-ellipsis'}>{item.name}</div>
                <CardActionText card={item} />
              </li>
            );
          })}
        </ul>
      );
    };
    const GetCardTextArea = () => {
      console.log('Getting');
      const DeckCardListArr: VNode[] = [];

      props.deckCardList.map((item) => {
        DeckCardListArr.push(
          <div class={`cards-list-box ${!item.card_number ? 'hidden' : ''}`}>
            <h2 class={'text-sm text-center bg-[#DCEDFF] mb-lg'}>
              {item.group_name}：<span>{item.card_number}</span>
            </h2>
            <CardItemsText cardList={item.card_list} />
          </div>
        );
      });

      if (!unref(cardSum)) {
        return <Empty description={'未选择卡牌'}></Empty>;
      }

      return <>{DeckCardListArr}</>;
    };

    const TitleBox = () => {
      return (
        <div class={'card-nums-box flex items-center justify-between text-sm mb-30px'}>
          <span class={'font-bold'}>卡牌总数： {unref(cardSum)}</span>
          {!unref(imageShow) ? (
            <div
              class={'show-btn flex items-center text-sm'}
              onClick={() => {
                imageShow.value = true;
              }}
            >
              <Icon icon='mdi:file-image-box' />
              <span>图片展示</span>
            </div>
          ) : (
            <div
              class={'show-btn flex items-center text-sm'}
              onClick={() => {
                imageShow.value = false;
              }}
            >
              <Icon icon='material-symbols:format-list-bulleted-rounded' />
              <span>列表展示</span>
            </div>
          )}
        </div>
      );
    };

    return () => (
      <Popup
        class='current-choose-cards-popup'
        v-model={[show.value, 'show']}
        style={{ zIndex: setting.PageTitleZIndex - 1 }}
        overlayStyle={{ zIndex: setting.PageTitleZIndex - 1 }}
        position={'left'}
        teleport={'body'}
      >
        <TitleBox />
        {unref(imageShow) ? <GetCardArea /> : <GetCardTextArea />}
      </Popup>
    );
  },
});
